<!-- 
  @name: 充值
  @date: 2020.3.10
 -->
<template>
	<view class="content">
		<!-- 信息区域 -->
		<view class="topview">
			<view class="list">
				<view class="left">姓名</view>
				<view class="right">{{info.userName}}</view>
			</view>
			<view class="list">
				<view class="left">手机号</view>
				<view class="right">{{info.userPhone}}</view>
			</view>
			<view class="list">
				<view class="left">充值金额</view>
				<view class="right">
					<input type="digit" class="int" placeholder="输入充值金额" placeholder-class="phcolor" v-model.trim="fillMoney" />
				</view>
			</view>
		</view>
		
		<!-- 按钮 -->
		<button class="btn_submit" @tap="submit">充值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},  //信息
				fillMoney: '',  //金额
			}
		},
		onLoad() {
			this.info = JSON.parse(this.$store.state.tmpData);
			this.$store.commit('setTmpData', '');
		},
		methods: {
			//提交
			submit() {
				if(!this.fillMoney) {
					this.$showToast('请输入充值金额！');
					return;
				}
				if(this.lock) return;
				this.lock = true;
				this.$http({
					url: this.$api.exchargeUrl + 'operatorcharge',
					data: {
						userId: this.info.userId,
						fillMoney: parseFloat(this.fillMoney)
					}
				}).then(res => {
					this.$store.commit('setTmpData', JSON.stringify(res));
					this.lock = false;
					uni.redirectTo({
						url: './rechargeSuc'
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 信息区 */
	.topview {
		width: 750rpx;
		padding-left: 40rpx;
		background-color: $color-white;
		.list {
			width: 100%;
			height: 90rpx;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				color: $color-grey-dark;
			}
			.right {
				flex: 1;
				text-align: end;
				margin-left: 40rpx;
				padding-right: 40rpx;
			}
		}
	}
	
	/* 按钮 */
	.btn_submit {
		margin-top: 290rpx;
	}
	
</style>
